<template>
  <!-- 修改用户的对话框 -->
  <el-dialog
    title="修改用户"
    v-model="editDialogVisible"
    width="50%"
    @close="editDialogClose"
  >
    <!-- 内容主体区域 -->
    <!-- 表单中model和rules名称不可以相同 -->
    <el-form
      ref="editFormRef"
      :model="editForm"
      :rules="editFormRules"
      label-width="70px"
    >
      <el-form-item label="用户名">
        <el-input v-model="editForm.userName" disabled></el-input>
      </el-form-item>
      <!-- <el-form-item label="密码" prop="password">
        <el-input v-model="editForm.password"></el-input>
      </el-form-item> -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phoneNumber">
        <el-input v-model="editForm.phoneNumber"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogClose">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { putUserInfo } from "network/user.js";
export default {
  props: {
    editDialogVisible: {
      type: Boolean,
      default: false
    },
    //保存查询到的用户信息对象
    editForm: {
      type: Object,
      default: {}
    },
    editFormRules: {
      type: Object,
      default: {}
    }
  },
  data() {return{}},
  emits: ["editDialogClose"],
  methods: {
    //监听修改用户对话框的关闭事件
    editDialogClose() {
      this.$emit("editDialogClose");
      this.$refs.editFormRef.resetFields();
    },
    //点击按钮,修改用户
    editUser() {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid);//校验成功true,失败false
        if (!valid) return;
        //发起网络请求
        // console.log(this.editForm);
        const res = await putUserInfo(this.editForm);
        if (!res.success)
          return this.$message.error({ showClose: true, message: res.msg });
        this.$message.success({ showClose: true, message: res.msg });
        this.$emit("editDialogClose");
      });
    }
  }
};
</script>

<style></style>
